<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        <input id="num" placeholder="请输入学生姓名" />
        <input id="name" placeholder="请输入学生性别" />
        <input id="dep" placeholder="请输入学院" />
        <button onclick="insert()">插入学生信息</button>
    </div>
    <div>
        <input id="searchName" th:value="${bbb}" placeholder="请输入模糊查询学生姓名" />
        <input id="dep1" placeholder="根据学院查询" />
        <button onclick="getList()">查询</button>
    </div>
    <div>
        <div style="display: flex;flex-direction: row;">
            <div style="width: 100px;">ID</div>
            <div style="width: 100px;">人数</div>
            <div style="width: 100px;">班级</div>
            <div style="width: 100px;">学院</div>
        </div>
        <div th:each="item : ${gg}" style="display: flex;flex-direction: row;">
            <div style="width: 100px;" th:text="${item.id}"></div>
            <div style="width: 100px;" th:text="${item.num}"></div>
            <input style="width: 100px;" th:value="${item.name}"></input>
            <div style="width: 100px;" th:text="${item.dep}"></div>
            <button th:onclick="|update(${item.id})|" >更新</button>
            <button th:onclick="|deletes(${item.id})|">删除</button>
        </div>
    </div>
</div>
<script>
    function deletes(id) {
        axios
            .get('http://localhost:8080/student/deleteJpa1?id=' + id)
            .then(response => {
                alert(response.data)
                //删除完成后刷新列表
                window.location.reload()
            })
    }
    //传ID过来，然后使用document.getElementById(id)获取对应的修改输入框的值
    function update(id){
        axios
            .get('http://localhost:8080/student/updateJpa13?id=' + id+'&name='+document.getElementById(id).value)
            .then(response => {
                alert(response.data)
                //更新完成后刷新列表
                window.location.reload()
            })
    }
    function insert() {//插入
        var num = document.getElementById("num").value;//获取插入里面名称输入框的值
        var name = document.getElementById("name").value;
        var dep = document.getElementById("dep").value;
        axios
            .get('http://localhost:8080/student/insertJpa13?num=' + num + '&name=' + name + '&dep=' + dep)
            .then(response => {
                alert(response.data)
                //插入完成后刷新列表
                window.location.reload()
            })
    }
    function getList() { //模糊搜索
        var searchName = document.getElementById("searchName").value;
        var dep = document.getElementById("dep1").value;
        window.location.href = "http://localhost:8080/findAllJpaByName133?name="+searchName+"&dep="+dep;
    }
</script>
</body>
</html>